<script setup>
import { onMounted, reactive, ref, watchEffect } from 'vue'
import request from '@/utils/axios'
import qs from 'qs';
import UserCardListByTags from '@/components/UserCardListByTags.vue';
const userList = ref([])
let loading = ref(false)
const params = reactive({
    pageSize: 8,
    pageNum: 1
})
const searchText = ref('')
const loadData = async () => {
    const res = await request.get('/user/recommend', {
        params
    })
    if(res.data.length === 0){
        showFailToast("已经加载完全部了！")
        return 
    }
    if (res.data) {
        res.data.forEach((user) => {
            if(user.tags != ""){
                user.tags = user.tags.replace("]","").replace("[","").split(',');
            }
            user.avatarUrl = "data:image/png;base64," + user.avatarUrl
        })
        userList.value = res.data.concat(userList.value)
    }
}

watchEffect(() => {
    loadData();
})

const searchByAccount = async () => {
    const res = await request.get('/user/searchByAccount', {
        params: {
            searchText: searchText.value,
        },
        paramsSerializer: params => {
            return qs.stringify(params, { indices: false })
        }
    })
    if (res.data) {
        res.data.forEach((user) => {
            if (user.tags) {
                user.tags = JSON.parse(user.tags)
            }
            user.avatarUrl = "data:image/png;base64," + user.avatarUrl
        })
        userList.value = res.data
    }
}
const onRefresh = async () => {
    loading.value = true
    params.pageNum++;
    loadData()
    loading.value = false
    showSuccessToast("刷新成功！");
};
</script>
<template>
    <van-search v-model="searchText" placeholder="请输入用户账号" @search="searchByAccount(searchText)" />

    <van-pull-refresh v-model="loading" @refresh="onRefresh" successText="刷新成功！">
        <UserCardListByTags :userList="userList" v-if="userList && userList.length >= 1" title="为您推荐" action="查看信息" />
        <van-empty v-else description="没有伙伴为您展示" />
    </van-pull-refresh>

</template>

<style scoped lang='scss'></style>